<template>
<div class="product-detail"></div>
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <span>首页</span>
      <i class="iconfont icon-arrow-right"></i>
      <span>二手产品</span>
      <i class="iconfont icon-arrow-right"></i>
      <span>{{goodsName}}</span>
    </div>

    <div class="detail-container">
      <!-- 左侧图片展示区 -->
      <div class="product-gallery">
        <div class="main-image-wrapper">
          <img :src="currentImage" alt="商品主图" class="main-image">
          <div class="image-overlay">
          
          </div>
        </div>
        
      </div>

      <!-- 右侧商品信息 -->
      <div class="product-info">
        <div class="product-header">
          <div class="tags">
            <span class="tag quality">9成新</span>
            <span class="tag authentic">已验证</span>
          </div>
          <h1 class="title">{{introduct}}</h1>

        </div>

        <div class="price-section">
          <div class="price-row">
            <span class="label">转售价</span>
            <span class="current-price">¥{{price}}</span>
            <span class="discount">4.8折</span>
          </div>
          <div class="price-tips">
            <i class="iconfont icon-info"></i>
            该商品支持验货交易，确认无误后再付款
          </div>
        </div>

        <div class="detail-section">
          <div class="detail-row">
            <span class="label">商品成色</span>
            <div class="value">
              <div class="condition-bar">
                <div class="condition-progress" style="width: 90%"></div>
              </div>
              <span class="condition-text">9成新</span>
            </div>
          </div>
          <div class="detail-row">
            <span class="label">购买日期</span>
            <span class="value">2023年8月购入（发票证明）</span>
          </div>
          <div class="detail-row">
            <span class="label">商品编号</span>
            <span class="value">SN78955663</span>
          </div>
          <div class="detail-row">
            <span class="label">浏览次数</span>
            <span class="value">1,234次</span>
          </div>
        </div>

        <div class="seller-section">
          <div class="seller-info">
            <img src="../assets/avatar.jpg" alt="卖家头像" class="seller-avatar">
            <div class="seller-detail">
              <div class="seller-name">
                李同学
                <span class="seller-badge">信誉优秀</span>
              </div>
              <div class="seller-school">厦门大学 · 计算机系</div>
            </div>
            <div class="seller-stats">
              <div class="stat-item">
                <span class="num">98%</span>
                <span class="text">好评率</span>
              </div>
              <div class="stat-item">
                <span class="num">45</span>
                <span class="text">成功交易</span>
              </div>
            </div>
          </div>
        </div>

        <div class="action-section">
          <button class="btn primary" @click="handleBuyNow">
        <i class="iconfont icon-message"></i>
        立即购买
      </button>
      <button class="btn secondary" @click="handleCollect">
        <i class="iconfont icon-favorite"></i>
        收藏商品
      </button>
          <button class="btn report">
            <i class="iconfont icon-warning"></i>
            举报
          </button>
        </div>
      </div>
    </div>

    <!-- 商品详情区域 -->
    <!-- 修改 template 中的标签页部分 -->
    <div class="product-detail-tabs">
      <div class="tab-header">
        <div 
          v-for="(tab, index) in tabs" 
          :key="index"
          class="tab"
          :class="{ active: currentTab === index }"
          @click="currentTab = index"
        >
          {{ tab.name }}
        </div>
      </div>
      
      <div class="tab-content">
     
    
        <!-- 交易须知 tab -->
        <div v-if="currentTab === 1" class="notice-content">
          <div class="notice-section">
            <h3>交易流程</h3>
            <div class="process-steps">
              <div class="step">
                <div class="step-icon">1</div>
                <div class="step-info">
                  <h4>联系卖家</h4>
                  <p>与卖家沟通商品细节和交易方式</p>
                </div>
              </div>
              <div class="step">
                <div class="step-icon">2</div>
                <div class="step-info">
                  <h4>线下验货</h4>
                  <p>约定时间地点，当面查验商品</p>
                </div>
              </div>
              <div class="step">
                <div class="step-icon">3</div>
                <div class="step-info">
                  <h4>支付交易</h4>
                  <p>确认无误后，通过平台进行支付</p>
                </div>
              </div>
            </div>
          </div>
    
          <div class="notice-section">
            <h3>交易保障</h3>
            <div class="guarantee-list">
              <div class="guarantee-item">
                <i class="iconfont icon-shield"></i>
                <h4>假一赔三</h4>
                <p>若商品为假冒伪劣，可获得三倍赔偿</p>
              </div>
              <div class="guarantee-item">
                <i class="iconfont icon-time"></i>
                <h4>7天保障</h4>
                <p>交易完成后7天内发现问题可申请退款</p>
              </div>
              <div class="guarantee-item">
                <i class="iconfont icon-service"></i>
                <h4>客服支持</h4>
                <p>交易过程中遇到问题可随时联系客服</p>
              </div>
            </div>
          </div>
        </div>
    
        <!-- 买家评价 tab -->
        <div v-if="currentTab === 2" class="reviews-content">
          <div class="reviews-header">
            <div class="rating-overview">
              <div class="rating-score">4.8<span class="max-score">/5</span></div>
              <div class="rating-stars">★★★★★</div>
              <div class="rating-count">共12条评价</div>
            </div>
            <div class="rating-tags">
              <span class="tag active">全部(12)</span>
              <span class="tag">好评(10)</span>
              <span class="tag">中评(1)</span>
              <span class="tag">差评(1)</span>
            </div>
          </div>
    <!-- 新增评论输入表单 -->
  <div class="review-form">
    <ElForm 
      :model="commentForm" 
      :rules="commentRules" 
      ref="commentFormRef"
      class="comment-form"
    >
      <ElFormItem label="发表评论" prop="content">
        <ElInput 
          type="textarea" 
          v-model="commentForm.content" 
          rows="3" 
          placeholder="请输入您的评价..."
        ></ElInput>
      </ElFormItem>
      
    
    </ElForm>
  </div>
          <div class="reviews-list">
            <div class="review-item">
              <div class="reviewer-info">
                <img src="../assets/avatar.jpg" alt="评价人头像" class="reviewer-avatar">
                <span class="reviewer-name">王同学</span>
                <div class="review-stars">★★★★★</div>
              </div>
              <div class="review-content">
                <p class="review-text">商品完全符合描述，成色很新，卖家人很好，当面交易很顺利。</p>
                <div class="review-images">
                  <img src="https://via.placeholder.com/100x100" alt="评价图片">
                  <img src="https://via.placeholder.com/100x100" alt="评价图片">
                </div>
                <div class="review-meta">
                  <span class="review-time">2024-01-15</span>
                  <span class="review-type">9成新 / 当面交易</span>
                </div>
              </div>
            </div>
    
            <div class="review-item">
              <div class="reviewer-info">
                <img src="../assets/avatar.jpg" alt="评价人头像" class="reviewer-avatar">
                <span class="reviewer-name">张同学</span>
                <div class="review-stars">★★★★☆</div>
              </div>
              <div class="review-content">
                <p class="review-text">电脑整体不错，就是电池续航稍微差了点，其他都挺满意的。</p>
                <div class="review-meta">
                  <span class="review-time">2024-01-10</span>
                  <span class="review-type">9成新 / 当面交易</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    </template>
    
    <script setup>
    // 引入 Element Plus 组件
import { ElDialog, ElForm, ElFormItem, ElInput, ElButton, ElMessage , ElMessageBox, ElCarousel, ElCarouselItem } from 'element-plus';
import { useRouter } from "vue-router";
import { getUsers } from "../api/user";
import { getCurrentInstance } from 'vue'
    const goodsId = ref(''); // 组件级响应式变量
    import { getGoods } from '../api/good';
    import { ref,onMounted } from 'vue'
    const introduct = ref(''); // 商品介绍
    const goodsName = ref(''); // 商品名称
    const coverImage = ref(''); // 封面图片
    const price = ref(''); // 价格

    const currentImage = ref('')
    const router = useRouter()
   onMounted(() => {
goodsId.value =localStorage.getItem("goodsId")
const  token =localStorage.getItem("accessToken")
if(!token){
    alert("请先登录")
   router.push("/")
  }else{
    getGoodsa(); // 页面加载时获取商品数据
  }

  
});
// 添加评论数据
    const reviews = [
    {
    id: 1,
    user: {
    name: '王同学',
    avatar: '../assets/avatar.jpg'
    },
    rating: 5,
    content: '商品完全符合描述，成色很新，卖家人很好，当面交易很顺利。',
    images: [
    'https://via.placeholder.com/100x100',
    'https://via.placeholder.com/100x100'
    ],
    time: '2024-01-15',
    type: '9成新 / 当面交易'
    },
    {
    id: 2,
    user: {
    name: '张同学',
    avatar: '../assets/avatar.jpg'
    },
    rating: 4,
    content: '电脑整体不错，就是电池续航稍微差了点，其他都挺满意的。',
    images: [],
    time: '2024-01-10',
    type: '9成新 / 当面交易'
    },
    {
    id: 3,
    user: {
    name: '李同学',
    avatar: '../assets/avatar.jpg'
    },
    rating: 5,
    content: '卖家很专业，电脑各项性能都测试过了，很满意的一次交易。',
    images: [
    'https://tse1-mm.cn.bing.net/th/id/OIP-C.mH9YLFEL5YdVxJM82mjVJQHaEo?w=292&h=182&c=7&r=0&o=5&dpr=1.4&pid=1.7'
    ],
    time: '2024-01-08',
    type: '9成新 / 当面交易'
    }
    ]
const commentForm = ref({
  content: ''
})

const commentRules = ref({
  content: [{ required: true, message: '请输入评论内容', trigger: 'blur' }]
})

const handleCommentSubmit = async () => {
  // 表单验证
  await validateCommentForm()
  
  // 检查用户登录状态
  const accessToken = localStorage.getItem('accessToken')
  if (!accessToken) {
    ElMessage.error('请先登录后再评论')
    return router.push('/login')
  }

  try {
    // 模拟评论提交API（实际需替换为真实接口）
    const newComment = {
      id: Date.now(),
      user: {
        name: localStorage.getItem('userName') || '匿名用户',
        avatar: '../assets/avatar.jpg' // 可替换为用户真实头像
      },
      rating: 5, // 可添加评分功能后修改
      content: commentForm.value.content,
      images: [],
      time: new Date().toISOString().split('T')[0],
      type: `${goodsName.value} / 系统自动评价`
    }

    // 添加到评论列表顶部
    reviews.value.unshift(newComment)
    
    // 清空表单
    commentForm.value.content = ''
    ElMessage.success('评论提交成功')
    
  } catch (error) {
    console.error('评论提交失败:', error)
    ElMessage.error('评论提交失败，请重试')
  }
}

// 在组件 setup 函数中
const instance = getCurrentInstance()
const commentFormRef = ref(null)

const validateCommentForm = () => {
  return new Promise((resolve, reject) => {
    if (commentFormRef.value) {
      commentFormRef.value.validate((valid) => {
        if (valid) {
          resolve()
        } else {
          reject(new Error('表单验证失败'))
        }
      })
    } else {
      reject(new Error('表单引用未找到'))
    }
  })
}







// 收藏商品点击处理方法
const handleCollect = async () => {
  try {
    // 显示确认对话框
    await ElMessageBox.confirm(
      '确定要收藏该商品吗？', 
      '确认收藏', 
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info',
      }
    );
    
    // 用户确认后，执行收藏逻辑
    console.log('用户确认收藏，准备执行收藏操作');
    
    // 从本地获取用户ID（假设已登录）
    const accessToken = localStorage.getItem('accessToken');
    const userId = localStorage.getItem('userId');
    const goodsId = localStorage.getItem('goodsId');
    if (!accessToken) {
      ElMessage.error('请先登录');
      router.push('/');
      return;
    }
    
    // 调用API进行收藏操作，假设存在 collectGoodsApi 方法
    const response = await getGoods.collectGoodsApi({
      goodsId: Number(goodsId),
      userId: Number(userId)
    });
    
    // 处理收藏结果

      ElMessage.success('收藏成功');
      router.push('/product');
  } catch (error) {
    // 处理取消或错误
    if (error instanceof Error) {
      console.log('用户取消收藏');
    } else {
      console.error('收藏过程中发生错误:', error);
      ElMessage.error('收藏失败，请重试');
    }
  }
};
const handleBuyNow = async () => {
  try {
    // 1. 显示确认对话框
    await ElMessageBox.confirm(
      '确定要立即购买该商品吗？', 
      '确认购买', 
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    );
    
    // 2. 用户确认后，执行购买逻辑
    console.log('用户确认购买，准备创建订单');
    
    // 3. 从本地获取用户ID（假设已登录）
    const accessToken = localStorage.getItem('accessToken');
    const userId = localStorage.getItem('userId');
    const goodsId = localStorage.getItem('goodsId');
    if (!accessToken) {
      ElMessage.error('请先登录');
      router.push('/');
      return;
    }


    const response2 = await getUsers.dchargeApi({
      id: userId,              
      amount: price.value 
    });
  
    // 5. 调用API创建订单
    const response = await getGoods.orderGoodsApi({
      goodsId: goodsId,
      userId: Number(userId),
      price: Number(price.value)
    });
    
    // 6. 处理订单创建结果
 
      const orderId = response.data.data;
      ElMessage.success('订单创建成功');
      
      // 7. 跳转到支付页面，携带订单ID
      router.push("/product");
    
  } catch (error) {
    // 处理取消或错误
    if (error instanceof Error) {
      console.log('用户取消购买');
    } else {
      console.error('购买过程中发生错误:', error);
      ElMessage.error('购买失败，请重试');
    }
  }
};
const getGoodsa = async () => {
  if (goodsId.value) { // 检查是否有值
    try {
      const response = await getGoods.getGoodsByIdApi({
        goodsId: Number(goodsId.value) // 使用响应式变量
      });
      introduct.value = response.data.data.introduction; // 存储商品介绍
      goodsName.value = response.data.data.goodsName; // 存储商品名称  
      currentImage.value = response.data.data.coverImage; // 存储商品名称  
          price.value = response.data.data.price; // 存储价格
      console.log('ok', response);
    } catch (error) {
      console.error('失败:', error);
    }
  }
};
    const currentImageIndex = ref(0)
  
    

    
    const selectImage = (index) => {
      currentImageIndex.value = index
      currentImage.value = images[index]
    }
    
    const detailImages = [
      'https://tse1-mm.cn.bing.net/th/id/OIP-C.cBzDSOfftTq2_4LB4IyVEwHaFj?w=188&h=141&c=7&r=0&o=5&dpr=1.4&pid=1.7',  // 详细展示图1
      'https://tse1-mm.cn.bing.net/th/id/OIP-C.cBzDSOfftTq2_4LB4IyVEwHaFj?w=188&h=141&c=7&r=0&o=5&dpr=1.4&pid=1.7',  // 详细展示图2
      'https://tse1-mm.cn.bing.net/th/id/OIP-C.cBzDSOfftTq2_4LB4IyVEwHaFj?w=188&h=141&c=7&r=0&o=5&dpr=1.4&pid=1.7'   // 详细展示图3
    ]
    
    // 添加标签页状态管理
    const tabs = [
    
    { name: '商品详情' },
    { name: '交易须知' },
    { name: '买家评价(12)' }
    ]
    const currentTab = ref(0)
    
  
    
    // 评论分类统计
    const reviewStats = {
    total: 12,
    good: 10,
    medium: 1,
    bad: 1,
    averageRating: 4.8
    }
    
    // 当前选中的评论类型
    const currentReviewType = ref('all')
    
    // 切换评论类型
    const switchReviewType = (type) => {
    currentReviewType.value = type
    }
    </script>
    
    <style scoped>
    .product-detail {
      max-width: 1200px;
      margin: 0 auto;
      padding: 24px;
    }
    
    .breadcrumb {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #666;
      margin-bottom: 24px;
    }
    
    .detail-container {
      display: flex;
      gap: 40px;
      margin-bottom: 40px;
    }
    
    /* 左侧图片区域 */
    .product-gallery {
      width: 500px;
      flex-shrink: 0;
    }
    
    .main-image-wrapper {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 16px;
    }
    
    .main-image {
      width: 100%;
      height: 500px;
      object-fit: cover;
    }
    .review-form {
  background: #f8fafc;
  padding: 24px;
  border-radius: 12px;
  margin-bottom: 32px;
}

.el-form-item__label {
  width: auto;
  margin-right: 16px;
  font-weight: 500;
  color: #3b82f6;
}

.el-textarea__inner {
  border-radius: 8px;
  resize: none;
}

.comment-form .el-button {
  width: 120px;
  margin-left: auto;
  display: block;
}
    .image-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 12px;
      background: rgba(0, 0, 0, 0.5);
      color: white;
      font-size: 14px;
    }
    
    .thumbnail-list {
      display: flex;
      gap: 12px;
    }
    
    .thumbnail-item {
      width: 80px;
      height: 80px;
      border-radius: 8px;
      overflow: hidden;
      cursor: pointer;
      border: 2px solid transparent;
      transition: all 0.3s ease;
    }
    
    .thumbnail-item.active {
      border-color: #3b82f6;
    }
    
    .thumbnail-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    /* 右侧信息区域 */
    .product-info {
      flex: 1;
    }
    
    .product-header {
      margin-bottom: 24px;
    }
    
    .tags {
      margin-bottom: 16px;
    }
    
    .tag {
      padding: 4px 12px;
      border-radius: 4px;
      font-size: 14px;
      margin-right: 8px;
    }
    
    .tag.quality {
      background: #ecfdf5;
      color: #059669;
    }
    
    .tag.authentic {
      background: #eff6ff;
      color: #3b82f6;
    }
    
    .title {
      font-size: 24px;
      color: #1f2937;
      margin-bottom: 8px;
    }
    
    .subtitle {
      color: #666;
      font-size: 16px;
    }
    
    .price-section {
      background: #f8fafc;
      padding: 20px;
      border-radius: 12px;
      margin-bottom: 24px;
    }
    
    .price-row {
      display: flex;
      align-items: baseline;
      gap: 12px;
      margin-bottom: 12px;
    }
    
    .current-price {
      font-size: 32px;
      color: #ef4444;
      font-weight: bold;
    }
    
    .original-price {
      color: #666;
      text-decoration: line-through;
    }
    
    .discount {
      background: #fef2f2;
      color: #ef4444;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 14px;
    }
    
    .price-tips {
      color: #666;
      font-size: 14px;
    }
    
    .detail-section {
      margin-bottom: 24px;
    }
    
    .detail-row {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
    }
    
    .label {
      width: 100px;
      color: #666;
    }
    
    .condition-bar {
      width: 200px;
      height: 8px;
      background: #e5e7eb;
      border-radius: 4px;
      margin-right: 12px;
    }
    
    .condition-progress {
      height: 100%;
      background: #3b82f6;
      border-radius: 4px;
    }
    
    .seller-section {
      background: #fff;
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 24px;
      border: 1px solid #e5e7eb;
    }
    
    .seller-info {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    
    .seller-avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }
    
    .seller-detail {
      flex: 1;
    }
    
    .seller-name {
      font-size: 18px;
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .seller-badge {
      background: #fef3c7;
      color: #d97706;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 12px;
    }
    
    .seller-stats {
      display: flex;
      gap: 24px;
    }
    
    .stat-item {
      text-align: center;
    }
    
    .stat-item .num {
      color: #3b82f6;
      font-weight: bold;
      display: block;
    }
    
    .stat-item .text {
      color: #666;
      font-size: 14px;
    }
    
    .action-section {
      display: flex;
      gap: 16px;
    }
    
    .btn {
      padding: 12px 24px;
      border-radius: 8px;
      font-size: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .btn.primary {
      background: #3b82f6;
      color: white;
      border: none;
    }
    
    .btn.primary:hover {
      background: #2563eb;
    }
    
    .btn.secondary {
      background: white;
      border: 1px solid #3b82f6;
      color: #3b82f6;
    }
    
    .btn.secondary:hover {
      background: #eff6ff;
    }
    
    .btn.report {
      background: white;
      border: 1px solid #e5e7eb;
      color: #666;
    }
    
    .btn.report:hover {
      background: #f8fafc;
    }
    
    /* 详情标签页 */
    .product-detail-tabs {
      background: white;
      border-radius: 12px;
      margin-top: 40px;
    }
    
    .tab-header {
      display: flex;
      border-bottom: 1px solid #e5e7eb;
    }
    
    .tab {
      padding: 16px 32px;
      cursor: pointer;
      color: #666;
      border-bottom: 2px solid transparent;
    }
    
    .tab.active {
      color: #3b82f6;
      border-bottom-color: #3b82f6;
    }
    
    .tab-content {
      padding: 32px;
    }
    
    .spec-list {
      margin-bottom: 32px;
    }
    
    .spec-item {
      display: flex;
      padding: 12px 0;
      border-bottom: 1px solid #e5e7eb;
    }
    
    .spec-label {
      width: 120px;
      color: #666;
    }
    
    .condition-description {
      margin-bottom: 32px;
      line-height: 1.8;
    }
    
    .detail-images {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }
    
    .detail-images img {
      width: 100%;
      border-radius: 8px;
    }
    
    h3 {
      margin-bottom: 16px;
      color: #1f2937;
    }
    
    /* 交易须知样式 */
    .process-steps {
      display: flex;
      gap: 40px;
      margin-top: 24px;
    }
    
    .step {
      display: flex;
      align-items: flex-start;
      gap: 16px;
    }
    
    .step-icon {
      width: 32px;
      height: 32px;
      background: #3b82f6;
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
    }
    
    .step-info h4 {
      margin-bottom: 8px;
      color: #1f2937;
    }
    
    .step-info p {
      color: #666;
      font-size: 14px;
    }
    
    .guarantee-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: 24px;
    }
    
    .guarantee-item {
      text-align: center;
      padding: 24px;
      background: #f8fafc;
      border-radius: 12px;
    }
    
    .guarantee-item i {
      font-size: 32px;
      color: #3b82f6;
      margin-bottom: 16px;
    }
    
    .guarantee-item h4 {
      margin-bottom: 8px;
      color: #1f2937;
    }
    
    .guarantee-item p {
      color: #666;
      font-size: 14px;
    }
    
    /* 买家评价样式 */
    .reviews-header {
      margin-bottom: 32px;
    }
    
    .rating-overview {
      text-align: center;
      margin-bottom: 24px;
    }
    
    .rating-score {
      font-size: 48px;
      color: #1f2937;
      font-weight: bold;
    }
    
    .max-score {
      font-size: 24px;
      color: #666;
    }
    
    .rating-stars {
      color: #f59e0b;
      font-size: 24px;
      margin: 8px 0;
    }
    
    .rating-count {
      color: #666;
    }
    
    .rating-tags {
      display: flex;
      gap: 12px;
      margin-bottom: 24px;
    }
    
    .rating-tags .tag {
      padding: 6px 16px;
      border-radius: 20px;
      background: #f3f4f6;
      color: #666;
      cursor: pointer;
    }
    
    .rating-tags .tag.active {
      background: #3b82f6;
      color: white;
    }
    
    .review-item {
      padding: 24px 0;
      border-bottom: 1px solid #e5e7eb;
    }
    
    .reviewer-info {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
    }
    
    .reviewer-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
    
    .reviewer-name {
      color: #1f2937;
      font-weight: 500;
    }
    
    .review-stars {
      color: #f59e0b;
    }
    
    .review-text {
      color: #1f2937;
      line-height: 1.6;
      margin-bottom: 16px;
    }
    
    .review-images {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
    }
    
    .review-images img {
      width: 100px;
      height: 100px;
      border-radius: 8px;
      object-fit: cover;
    }
    
    .review-meta {
      display: flex;
      gap: 16px;
      color: #666;
      font-size: 14px;
    }
    
    .notice-section {
      margin-bottom: 40px;
    }
    </style>